<template>
	<view class="container">
		<view class="banner_box">
			<image
				src="/static/img/login_bg.jpg" 
				style="width: 240rpx; height: 240rpx;" />
		</view>
		<view class="content_box">
			<!-- 菜单 -->
			<view class="menu_box">
				<view class="menu_item" @click="goProject">
					<view class="menu_text">项目</view>
					<view class="menu_icon">
						<image
							src="/static/img/item.png" 
							style="width: 100rpx; height: 100rpx;" />
					</view>
				</view>
				<view class="menu_item" @click="goAnli">
					<view class="menu_text">案例</view>
					<view class="menu_icon">
						<image
							src="/static/img/an_li.png" 
							style="width: 100rpx; height: 100rpx;" />
					</view>
				</view>
			</view>
			<!-- 注册栏 -->
			<view class="login_box" @click="goLogin">
				<view class="login_text">
					<u-icon name="integral-fill" color="#000"></u-icon>
					注册会员 | 登录后尊享更多专属特权</view>
				<view class="login_btn">
					注册/登录
				</view>
			</view>
			<!-- 轮播案例 -->
			<view class="swiper_box">
				<swiper :autoplay="true" :interval="5000" :duration="500">
					<block v-for="(page,index) in list1" :key="index">
						<swiper-item>
							<view class="swiper_page">
								<block class="swiper_page" v-for="item in page" :key="item.id">
									<view class="page_item">
										<view class="page_item_img">
											<image class="img" :src="item.url" mode="heightFix"></image>
										</view>
										<view class="page_item_cont">
											<view class="cont_name ellipsis">{{item.name}}</view>
											<view class="cont_info ellipsis">{{item.info}}</view>
										</view>
									</view>
								</block>
							</view>
						</swiper-item>
					</block>
				</swiper>
			</view>
		</view>
	</view>
</template>

<script>
	import { getPage } from '../../utils/config';
	import { promisify, $empty, storage, $toast, http, Validate } from '../../utils/utils';
	import wxApi from '../../utils/wxApi';
	import api from '../../utils/api';
	const app = getApp();
	export default {
		data() {
			return {
				list1: [
							[
								{
									id:1.1,
									url:'https://keju123.com/UploadFiles/image/20240326/6384709155879433887221107.jpg',
									name:"菲律宾别墅",
									info:"菲律宾别墅描述"
								},
								{
									id:1.2,
									url:'https://keju123.com/UploadFiles/image/20240326/6384709101228021894785851.jpg',
									name:"三盛别墅",
									info:"三盛别墅描述"
								},
								{
									id:1.3,
									url:'https://keju123.com/UploadFiles/image/20240326/6384709067518917409836099.jpg',
									name:"龙海白云",
									info:"龙海白云描述"
								}
							],
							[
								{
									id:2.1,
									url:'https://keju123.com/UploadFiles/image/20240326/6384708925210192356865463.jpg',
									name:"国贸天成9栋",
									info:"国贸天成9栋描述"
								},
								{
									id:2.2,
									url:'https://keju123.com/UploadFiles/image/20240326/6384708896138271057181221.jpg',
									name:"中梁远洋18栋",
									info:"中梁远洋18栋描述"
								},
								{
									id:2.3,
									url:'https://keju123.com/UploadFiles/Anli/20231204/20231204035657_3602.jpg',
									name:"建发央著4栋",
									info:"建发央著4栋描述"
								}
							],
						]
			}
		},
		methods: {
			goProject(){
				 wxApi.switchTab(getPage.project);
			},
			goAnli(){
				wxApi.switchTab(getPage.anli);
			},
			goLogin(){
				wxApi.navigateTo(getPage.login);
			},
		}
	}
</script>

<style scoped lang="scss">
	view{
			box-sizing: border-box;
		}
	.ellipsis{
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}
	.container{
		background-color: #f6f6f6;
	}
	.banner_box{
		width: 100%;
		height: 620rpx;
		// background-color: #050505;
		background-color: #f6f6f6;
		display: flex;
		align-items: center;
		justify-content: center;
		padding-top: 80rpx;
	}
	.content_box{
		padding: 30rpx;
	}
	.menu_box{
		display: flex;
		justify-content: space-between;
		width: 100%;
		.menu_item{
			padding: 30rpx;
			text-align: center;
			width: 48%;
			height: 360rpx;
			background-color: #fff;
			border-radius: 20rpx;
			.menu_text{
				margin: 20rpx 0;
				font-weight: 600;
				font-size: 34rpx;
			}
			.menu_icon{
				margin-top: 60rpx;
			}
		}
	}
	.login_box{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;
		margin: 20rpx 0;
		width: 100%;
		height: 90rpx;
		border-radius: 30rpx;
		background-color: #fff;
		.login_text{
			display: flex;
			font-size: 24rpx;
			font-weight: 600;
		}
		.login_btn{
			border-radius: 24rpx;
			width: 140rpx;
			height: 48rpx;
			line-height: 48rpx;
			text-align: center;
			background-color: #fee6ba;
			font-size: 24rpx;
		}
	}
	.swiper_box{
		.swiper_page{
			display: flex;
			justify-content: space-between;
			height: 100%;
			.page_item{
				border-radius: 30rpx;
				background-color: #fff;
				height: 100%;
				width: 224rpx;
				overflow: hidden;
				.page_item_img{
					overflow: hidden;
					width: 224rpx;
					height: 180rpx;
					.img{
						width: 100% !important;
						height: 100% !important;
					}
				}
				.page_item_cont{
					font-size: 24rpx;
					padding: 14rpx 20rpx 0;
					.cont_name{
						margin-bottom: 6rpx;
						font-weight: 600;
						color: #000;
					}
					.cont_info{
						color:#c8c8c8 ;
						width: 100%;
					}
				}
			}
		}
	}
</style>
